<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="wanl-goods-comment">
			<view class="padding-bj bg-white margin-bottom-sm head">
				<!-- <view class="flex justify-start align-center">
					<text>总分：</text>
					<text class="text-green text-sm margin-right-sm text-bold">4.5分</text>
					<wanl-rate :size="14" :current="4.5" :disabled="true" />
				</view> -->
				<!-- 标签 -->
				<view>
					<view v-for="(item,index) in lists" :key="index" @tap="onTag(item.id)" class="cu-tag round" :class="{ active: tag == item.id }">{{item.name}}
						({{ item.count }})</view>
				</view>
			</view>
			<wanl-empty text="没有找到任何评论" v-if="listData.length == 0"></wanl-empty>
			<view class="list padding-bj radius-bock" v-for="item in listData" :key="item.id">
				<view class="userinfo">
					<view class="avatar">
						<view class="cu-avatar round margin-right-xs"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.user.avatar, 35, 35, 2, 'avatar') + ')' }">
						</view>
						<view class="text-sm">
							<view>{{ item.user.nickname }}</view>
							<wanl-rate :size="12" :current="item.score" :disabled="true" />
						</view>
					</view>
					<view class="text-gray text-xs">{{ $wanlshop.timeToDate(item.createtime) }}</view>
				</view>

				<view class="details">
					<view class="margin-bottom-sm text-s">{{ item.content }}</view>
					<!-- <view class="text-gray text-sm">规格：{{ item.suk }}</view> -->
				</view>

				<view class="images">
					<image :src="$wanlshop.oss(image, 248, 0)" mode="aspectFill" v-for="(image, index) in item.images_text" :key="index" @tap="previewImage(item.images_text, index)"></image>
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="() => {}">
			<!-- 顶部 -->
			<view style="z-index: 99999;" class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''"
				@tap="modalName = null">
				<view class="wanl-modal-menu cu-dialog" @tap.stop=""><wanl-directs @change="modalName = null" /></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [], //列表
				// tagData: [], //标签数据
				statisticsData: {
					rate: 0,
					good: 0,
					pertinent: 0,
					poor: 0,
					figure: 0
				}, //统计
				lists:[],
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				goods_id: 0, //商品ID
				tag: 0, //查询的标签
				type: 'goods',
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				},
				modalName:'',
				shop_id:''
			};
		},
		onNavigationBarButtonTap(e) {
			this.modalName = 'menu'
		},
		onLoad(option) {
			this.goods_id = option.id;
			this.type = option.t;
			if(option.shop_id) {
				this.shop_id = option.shop_id
			}
			this.loadData(option.id);
			this.getType(option.id)
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData(this.goods_id);
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData(this.goods_id);
			}
		},
		methods: {
			async getType(id) {
				let type = this.type;
				let url = '';
				switch (Number(type)){
					case 1:
						url = '/addons/homeking/api.comment/count';
						break;
					case 2:
						url = '/addons/medicalvisit/api.comment/count';
						break;
					case 3:
						url = '/addons/accompany/api.comment/count';
						break;
					case 4:
						url = '/addons/nursing/api.comment/count';
					default:
						break;
				}
				await uni.request({
					url: url,
					data: {
						type: this.type, // /api/publics/commons/public_types接口
						goods_id: id,
						shop_id:this.shop_id
					},
					success: res => {
						this.lists = res.data
					}
				})
			},
			async loadData(id) {
				//加载商品
				let type = this.type;
				let url = '';
				switch (Number(type)){
					case 1:
						url = '/addons/homeking/api.comment/lists';
						break;
					case 2:
						url = '/addons/medicalvisit/api.comment/lists';
						break;
					case 3:
						url = '/addons/accompany/api.comment/lists';
						break;
					case 4:
						url = '/addons/nursing/api.comment/lists';
						break;
					default:
						break;
				}
				await uni.request({
					url: url,
					data: {
						page: this.current_page,
						type: this.type, // 评论类型，1=家政服务,2=医护上门,3=陪诊陪护,4=医养院,5=长护险
						goods_id: id,
						state: this.tag,
						shop_id:this.shop_id
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.listData = this.reload ? res.data.data : this.listData.concat(res.data.data); //评论数据 追加
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.statisticsData = res.data.statistics; // 统计数据
						this.status = res.data.total == 0 ? 'noMore' : 'more';
					}
				});
			},
			/**
			 * @param {Object} image 图片数组
			 * @param {Object} index 键名
			 */
			previewImage(image, index) {
				//预览图片
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500, 0));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			},
			/**
			 * 搜索标签- 跟下拉刷新同理
			 * @param {Object} tag
			 */
			onTag(tag) {
				this.current_page = 1;
				this.reload = true;
				this.tag = tag;
				this.loadData(this.goods_id);
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/.cu-tag {
		background-color: #E9F4EB;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #555555 !important;
		line-height: 36rpx;
		background-color: #E9F4EB !important;
		margin-top: 0 !important;
		&.active {
			background-color: #4CBD66 !important;
			color: #fff !important;
		}
	}
	/deep/.list {
		margin-bottom: 20rpx;
	}
	.images {
		padding-bottom: 24rpx;
		image {
			width: 100rpx;
			height: 100rpx;
			margin-right: 16rpx;
			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>